<template>
    <div class="data-page">
        <CommonHeader>
            <div>北京市开放科技论文与科学数据资源共享平台</div>
        </CommonHeader>
        <div class="common-wrap">
            <div>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>数据详细内容</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div v-loading="loading" class="data-wrap">
                <div class="data-left">
                    <div class="title">{{ info.datasetNameCn }}</div>
                    <div class="content-item" v-show="info.author || info.authorName">
                        <div class="label">作者：</div>
                        <div class="text">{{ info.author || info.authorName }}</div>
                    </div>
                    <div class="content-item" v-show="info.submitAgency">
                        <div class="label">创建机构：</div>
                        <div class="text">{{ info.submitAgency }}</div>
                    </div>
                    <div class="content-item" v-show="info.keyword">
                        <div class="label">关键词：</div>
                        <div class="text">
                            <el-tag v-for="text in (info.keyword?.split('；'))" :key="text">{{ text }}</el-tag>
                        </div>
                    </div>
                    <div class="content-item" v-show="info.subjectClass">
                        <div class="label">学科：</div>
                        <div class="text">{{ info.subjectClass }}</div>
                    </div>
                    <div class="content-item" v-show="info.introduction">
                        <div class="label">简介：</div>
                        <div class="text">{{ info.introduction }}</div>
                    </div>
                    <div class="content-item" v-show="info.storageNum">
                        <div class="label">数据量：</div>
                        <div class="text">{{ info.storageNum }}</div>
                    </div>
                    <div class="content-item">
                        <div class="label">文件/记录数：</div>
                        <div class="text">{{ info.fileNum || 0 }}/{{ info.recordNum || 0 }}</div>
                    </div>
                    <div class="content-item" v-show="info.sharedScope">
                        <div class="label">共享范围：</div>
                        <div class="text">{{ info.sharedScope }}</div>
                    </div>
                    <div class="content-item" v-show="info.sharedPathway">
                        <div class="label">共享途径：</div>
                        <div class="text">{{ info.sharedPathway }}</div>
                    </div>
                    <div v-show="info.specialName">
                        <div class="title">专项名称</div>
                        <div>{{ info.specialName }}</div>
                    </div>
                    <div v-show="info.dsUrl">
                        <div class="title">数据获取</div>
                        <div>
                            <a class="link" :href="info.dsUrl" target="__blank">国家基础科学公共科学数据中心</a>
                        </div>
                    </div>
                </div>
                <div class="detail-right">
                    <div class="right-name">相关数据集</div>
                    <ul class="collection-list">
                        <li class="collection-item" v-for="(item, index) in info.relatedDs || []" :key="index">
                            <div class="index">{{ index + 1 }}.</div>
                            <div class="link" @click="$router.push(`/data/${item.id}`)">{{ item?.datasetNameCn }}</div>
                        </li>
                    </ul>
                    <div v-if="!info.relatedDs || info.relatedDs?.length === 0" style="padding: 4px">暂无相关数据集</div>
                    <div style="margin-top: 20px" class="right-name">相关文章</div>
                    <ul class="collection-list">
                        <li class="collection-item" v-for="(item, index) in info.relatedOa || []" :key="index">
                            <div class="index">{{ index + 1 }}.</div>
                            <div class="link" @click="$router.push(`/detail/${item.id}`)">{{ item?.oatitle }}</div>
                        </li>
                    </ul>
                    <div v-if="!info.relatedOa || info.relatedOa?.length === 0" style="padding: 4px">暂无相关文章</div>
                </div>
            </div>
        </div>
        <CommonFooter />
    </div>
</template>

<script>
import { post } from '@/common/request';
export default {
    name: 'data-page',
    data() {
        return {
            info: {},
            loading: false,
        }
    },
    watch: {
        '$route.params.id'() {
            this.getDetail()
        }
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        async getDetail() {
            this.loading = true
            const sid = +this.$route.params.id;
            const res = await post('/dataset/dsOrOaDetail', {
                type: 1,
                sid
            }).catch(err => ({
                message: String(err)
            }));
            this.loading = false
            if (res?.code === 200) {
                this.info = res.data || {}
            }
        },
    }
}
</script>

<style lang="less" scoped>
/deep/ .el-checkbox .el-checkbox__inner {
    border-color: #aaa;
}

.data-wrap {
    margin-top: 20px;
    display: flex;

    .data-left {
        margin-right: 20px;
        flex: 1;


    }

    .link{
        color:#4472c4; 
        text-decoration: none;
        &:hover{
            text-decoration: underline;
        }
    }

    .title {
        margin-top: 20px;
        margin-bottom: 20px;
        line-height: 30px;
        font-size: 20px;
    }

    .content-item {
        margin-bottom: 20px;
        display: flex;

        .label {
            min-width: 120px;
            width: 120px;
            font-size: 16px;
            text-align: right;
        }

        .text {
            font-size: 14px;
            color: #555;
            line-height: 22px;
        }

        /deep/ .el-tag {
            margin-right: 4px;
            margin-bottom: 4px;
            height: 28px;
            padding: 0 10px;
            line-height: 26px;
            border-radius: 0;
        }
    }

    .detail-right {
        width: 260px;
        border: 2px solid @primaryColor;

        .right-name {
            padding: 6px 0;
            font-size: 18px;
            font-weight: bold;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background: @primaryColor;
        }

        .collection-list {
            .collection-item {
                padding: 6px 10px;
                display: flex;
                font-size: 14px;
                color: #000;
                line-height: 24px;

                .index {
                    min-width: 26px;
                    width: 26px;
                }

                .link {
                    flex: 1;
                    line-height: 20px;
                    cursor: pointer;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>